$(function(){
    // 需求一：自定义校验规则，判断用户修改信息
    layui.form.verify({
        nickname:[
            /^[\S]{1,10}$/,
            '用户必须1到10位，且不能出现空格'
        ]
    })

    // 需求二：发送请求获取数据，渲染至页面==>修改后还需要获取，再渲染，封装函数
    initUserInfo();
    function initUserInfo(){
        // 发送请求，获取数据
        axios({
            method:'GET',
            url:'/my/userinfo',
        }).then(({data:res})=>{
            console.log(res);
            if(res.status!=0){
                return layui.layer.msg(res.message)
            }
            // 使用layui内置表单赋值方法，将数据渲染至表单中
            layui.form.val('formUserInfo', res.data)
            // 由于后面需要使用id，而页面没有标签用于接收id
            // 解决方法：使用表单标签的隐藏域(hidden)或display：none新建标签接收，并隐藏
        })
    }

    // 需求三：表单重置功能
    $('#btnReset').on('click',function(e){
        // 阻止表单默认行为
        e.preventDefault()
        // 点击重置，获取服务器数据渲染至页面
        initUserInfo()
    })

    // 需求四：表单提交用户修改信息
    $('form').on('submit',function(e){
        e.preventDefault()
        // 发送请求提交用户数据
        axios({
            method:'POST',
            url:'/my/userinfo',
            data:$(this).serialize()
        }).then(({data:res})=>{
            // 提交判断
            if(res.status!=0){
                return layui.layer.msg(res.message)
            }
            layui.layer.msg('恭喜您，修改用户信息成功')
            // 将修改后的用户数据渲染至页面
            // 注意，这里不能直接调用index.js里面的全局函数
            window.parent.getUserInfo()
        })
    })
}) 